'use strict';

import React, { Component } from 'react';

import {
	Platform,
	StyleSheet,
	Button,
	Text,
	View,
	Modal
} from 'react-native';

import Touchable from '../components/Touchable';
import Header from '../components/Header';
import Menu from '../components/Menu';
import Game from '../components/Game';
//设置启动页
import SplashScreen from 'react-native-splash-screen';



export default class Home extends Component < {} > {
	constructor() {
		super();
		this.state = {
			menuVisible:false,
		}
	}
	componentWillMount() {
		console.log("123")
	}
	componentDidMount(){
		this.setState({
			menuVisible:true,
		},() => {
			setTimeout(SplashScreen.hide,300)
		})
	}
	toggleMenu(){
		this.setState(previousState => {
			return { menuVisible: !previousState.menuVisible };
		});
	}
	render() {		
		const { menuVisible } = this.state;
		return(
			<View style={styles.container}>
		        <Header showMenu={this.toggleMenu.bind(this)}/>
		        <Modal
			        animationType={"slide"}
			        transparent={false}
			        visible={this.state.menuVisible}
			        onRequestClose={this.toggleMenu.bind(this)}
			        >
		        	<Menu closeMenu={this.toggleMenu.bind(this)}/>	
		        </Modal>
				<Game active={!menuVisible}/>
		    </View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
	},
	
});